<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
		<title>蒲江现代农业产业园综合服务平台</title>
		<link rel="stylesheet" href="css/tool.css" />
		<link rel="stylesheet" href="css/header.css" />
		<link rel="stylesheet/less" type="text/css" href="./css/less/style.less">
		<style>
			body .demo-class {
				background: none;
			}
			
			body .demo-class .layui-layer-ico {
				background: url(img/x.png) no-repeat;
			}
			
			body .demo-class .layui-layer-ico:hover {
				background: url(img/x.png) no-repeat;
			}
			
			body .demo-class .layui-layer-setwin .layui-layer-close2 {
				right: -7px;
				top: 28px;
			}
		</style>
	</head>

	<body class="color_f scroll body-set">

		<div class="layui-row">
			<div class="header">
				<a href="./produce.html" class="swl fl cp ft12">
					农业生产
				</a>
				<a href="./operate.html" class="swl fl cp ft12">
					产业经营
				</a>
				<h1 class="fl bt ft28"><a class="color_f" href="./index.html">蒲江现代农业产业园综合服务平台</a></h1>
				<a href="./manage.html" class="swr fl cp ft12">
					综合管理
				</a>
				<a href="./service.html" class="swr fl cp ft12">
					应用服务
				</a>
			</div>
		</div>

		<div class="layui-row">
			<h1>&nbsp;&nbsp;地理标志授权企业信息<i class="fa fa-angle-double-right fa-fw fa-setCol"></i></h1>
		</div>

		<div class="layui-row">
			<div class="layui-fluid">
				<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
					<!-- 选项卡 -->
					<ul class="layui-tab-title setTab" id="tabCont"></ul>
					<div class="layui-tab-content">
						<!-- 选项卡内容0 -->
						<div class="layui-tab-item layui-show">
							<div class="layui-row">
								<div class="setBox">
									<ul class="thSpan" id="listTh0"></ul>
									<ul id="content0"></ul>
								</div>
								
							</div>
							<div class="layui-row">
								<div class="page-row">
									<div id="pagenation0"></div>
								</div>
							</div>
						</div>

						<!-- 选项卡内容1 -->
						<div class="layui-tab-item">
							<div class="layui-row">
								<div class="setBox">
									<ul class="thSpan" id="listTh1"></ul>
									<ul id="content1"></ul>
								</div>
								
							</div>
							<div class="layui-row">
								<div class="page-row">
									<div id="pagenation1"></div>
								</div>
							</div>
						</div>

						<!-- 选项卡内容2 -->
						<div class="layui-tab-item">
							<div class="layui-row">
								<div class="setBox">
									<ul class="thSpan" id="listTh2"></ul>
									<ul id="content2"></ul>
								</div>
							</div>
							<div class="layui-row">
								<div class="page-row">
									<div id="pagenation2"></div>
								</div>
							</div>
						</div>

						<!-- 选项卡内容3 -->
						<div class="layui-tab-item">
							<div class="layui-row">
								<div class="setBox">
									<ul class="thSpan" id="listTh3"></ul>
									<ul id="content3"></ul>
								</div>
							</div>
							<div class="layui-row">
								<div class="page-row">
									<div id="pagenation3"></div>
								</div>
							</div>
						</div>

						<!-- 选项卡内容4 -->
						<div class="layui-tab-item">
							<div class="layui-row">
								<div class="setBox">
									<ul class="thSpan" id="listTh4"></ul>
									<ul id="content4"></ul>
								</div>
							</div>
							<div class="layui-row">
								<div class="page-row">
									<div id="pagenation4"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</body>
	<div id="std" style="display:none"></div>
	<script type="text/html" id="tabList">
		{{# layui.each(d.tabs, (index, item) => { }}
		<li class="{{item.stats?'layui-this':''}}">{{item.name}}</li>
		{{# }); }}
	</script>
	<script type="text/html" id="spanTh">
		<li>
			{{# layui.each(d.head, (index, item) => { }}
			<span class="{{index==0?'layui-col-md5':index==3?'layui-col-md3':'layui-col-md2'}}">{{item}}</span>
			{{# }); }}
		</li>
		<li>
			{{# layui.each(d.head, (index, item) => { }}
			<span class="{{index==0?'layui-col-md5':index==3?'layui-col-md3':'layui-col-md2'}}">{{item}}</span>
			{{# }); }}
		</li>
	</script>
	<script type="text/html" id="tmpList">
		{{# layui.each(d.list, (index, item) => { }}
		<li class="showbox" data-method="notice" data-id="{{item.id}}">
			<span class="layui-col-md5"><span class="order">{{item.serial+1}}.</span>{{item.title}}</span>
			<span class="layui-col-md2">{{item.type}}</span>
			<span class="layui-col-md2">{{item.contract}}</span>
			<span class="layui-col-md3">{{item.tele}}</span>
		</li>
		{{# }); }}
	</script>
	<script type="text/html" id="noticeBox">
		<div class="layui-card">
			<div class="layui-card-header">{{d.title}}</div>
			<div class="layui-card-body">
				<div class="layui-row">
					<div class="layui-col-md-offset1 layui-col-md5"><span class="tagCol">授权地标：</span>{{d.type}}</div>
					<div class="layui-col-md6"><span class="tagCol">联系电话：</span>{{d.tele}}</div>
				</div>
				<div class="layui-row">
					<div class="layui-col-md-offset2 layui-col-md4"><span>&nbsp;&nbsp;&nbsp;&nbsp;</span><img src="{{d.logo}}" alt="{{d.type}}" /></div>
					<div class="layui-col-md6"><span class="tagCol">联&nbsp;&nbsp;系&nbsp;&nbsp;人：</span>{{d.contract}}</div>
				</div>
			</div>
		</div>
	</script>
	<script src="https://cdn.bootcss.com/less.js/3.9.0/less.min.js"></script>
	<script src="./layui/layui.js"></script>
	<script src="./js/http.js"></script>
	<script src="./js/app.js"></script>
	<script>
		layui.use(["layer"], function() {
			var $ = layui.jquery;

			//构建模板
			var setlayTpl = function(mod, id, tpl, data) {
				layui.use([mod, "layer"], function() {
					var laytpl = layui.laytpl;
					var htmltpl = $(tpl).html()
					var view = document.getElementById(id);
					laytpl(htmltpl).render(data, function(html) {
						view.innerHTML = html;
					});
				});
			}

			//设置分页
			var setPagenation = function(mod, target, size, data, id, tpl) {
				layui.use(mod, function() {
					var laypage = layui.laypage
					laypage.render({ //动态分页
						elem: target,
						count: data.list.length,
						limit: size,
						prev: '<em><i class="fa fa-angle-double-left fa-fw"></i></em>',
						next: '<em><i class="fa fa-angle-double-right fa-fw"></i></em>',
						jump: function(obj) {
							var thisData = data.list.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
							var pages = {
								list: thisData
							};
							setlayTpl("laytpl", id, tpl, pages)
						}
					});

				})
			}

			//动态选项卡
			var setTab = function(mod) {
				layui.use(mod, function() {});
			}

			//设置弹框
			var setElastic = function(mod, type, target, id) {
				layui.use([mod], function() {
					var layer = layui.layer
					//触发事件
					var active = {
						notice: function(othis) {
							//示范一个公告层
							layer.open({
								skin: 'demo-class',
								type: 1,
								title: false, //不显示标题栏
								closeBtn: true,
								area: '800px;',
								shade: 0.8,
								id: 'LAY_layuipro', //设定一个id，防止重复弹出
								moveType: 1, //拖拽模式，0或者1
								content: $(id)
							});
						}
					}

					$(document).on(type, target, function() {
						var othis = $(this),
							method = othis.data('method');
						active[method] ? active[method].call(this, othis) : '';
					})
				});

			}

			//获取改值所在的对象的序号
			var findDataindex = function(target, data, param) {
				var index = -1;
				$.each(data, (key, item) => {
					if(item[param] == target) {
						index = key
					}
				});
				return index
			}

			//渲染弹框模板
			var randCheckBox = function(type, target, data) {
				$(document).on(type, target, function() {
					var getId = $(this).data("id")
					var index = findDataindex(getId, data.list, "id")
					setlayTpl("laytpl", "std", "#noticeBox", data.list[index])
				});
			}

			//对象拷贝
			function copyToObj(obj1, obj2) {
				var obj2 = obj2 || {}; //最初的时候给它一个初始值=它自己或者是一个json
				for(var name in obj1) {
					if(typeof obj1[name] === "object") { //先判断一下obj[name]是不是一个对象
						obj2[name] = (obj1[name].constructor === Array) ? [] : {}; //我们让要复制的对象的name项=数组或者是json
						copyToObj(obj1[name], obj2[name]); //然后来无限调用函数自己 递归思想
					} else {
						obj2[name] = obj1[name]; //如果不是对象，直接等于即可，不会发生引用。
					}
				}
				return obj2; //然后在把复制好的对象给return出去
			}

			//构建模板需要的数据模型
			var buildMode = function(json) {
				var data = {},
					dtd = $.Deferred(),
					limit = 16,
					count = -1;
				$.getJSON(json, function(res) {
					data.head = ["授权企业", "地标产品", "联系人", "联系电话"]
					data.tabs = []
					data.list = []
					$.each(res.tabs, function(index, item) {
						var obj = {
							name: item.name,
							stats: item.stats
						}
						data.tabs.push(obj)
					});
					$.each(res.list, function(index, item) {
						count += 1
						var obj = {
							id: "list" + count,
							type: item.type,
							serial: count,
							logo: item.logo,
							title: item.title,
							contract: item.contract,
							tele: item.tele,
							industry: item.industry,
							area: item.area,
							yield: item.yield,
							authen: item.authen,
							authType: item.authType,
							authInfo: item.authInfo
						}
						data.list.push(obj)
					});

					randCheckBox("click", ".showbox", data)
					setlayTpl("laytpl", "tabCont", "#tabList", data)
					setlayTpl("laytpl", "listTh0", "#spanTh", data)
					setlayTpl("laytpl", "listTh1", "#spanTh", data)
					setlayTpl("laytpl", "listTh2", "#spanTh", data)
					setlayTpl("laytpl", "listTh3", "#spanTh", data)
					setlayTpl("laytpl", "listTh4", "#spanTh", data)
					setPagenation("laypage", "pagenation0", limit, data, "content0", "#tmpList")
					dtd.resolve(data);
					setTab("element")
					setElastic("layer", 'click', '.showbox', '#std', "")
				})
				return dtd.promise();
			}
			

			buildMode("./data/position.json").then(function(data) {
				var obj1,obj2 = {},
				    limit = 16;
				obj1 =copyToObj(data, obj1)
				$(document).on("click", "#tabCont li", function() {
					var targetType = this.innerHTML + "",
						tally = -1;
					var key = findDataindex(targetType, data.tabs, "name")
					if(key != 0) {
						obj2.list = [];
						$.each(obj1.list, function(index, item) {
							if(item.type == targetType) {
								tally += 1
								item.serial = tally
								obj2.list.push(item)
							}
						})
						setPagenation("laypage", "pagenation" + key, limit, obj2, "content" + key, "#tmpList")
					} else {
						setPagenation("laypage", "pagenation" + key, limit, data, "content" + key, "#tmpList")
					}

				})
			})

		})
	</script>

</html>